<template>
  <div>
    <div class="mainStyle" v-loading="loading">
      <div class="treeDiv">
        <!-- <div class="treeTitle">结构化材料数据</div> -->
        <div class="treeStyle">
          <el-tree
            ref="materialTree"
            :data="treeData"
            node-key="index"
            highlight-current
            :default-expanded-keys="[0]"
            :default-checked-keys="[0]"
            :current-node-key="0"
            icon-class="el-icon-arrow-right"
            @node-click="treeSelect"
          />
        </div>
      </div>
      <div class="rightDiv" v-if="showType === 'form'">
        <div class="queryFormDiv">
          <el-form ref="queryForm" inline size="small" label-width="120">
            <el-form-item label="Series">
              <el-input disabled v-model="series" />
            </el-form-item>
            <el-form-item label="Specification">
              <el-select v-model="Specification" @change="queryFormChange('specification', $event)" clearable>
                <el-option v-for="item in specialOptions" :label="item.lable" :value="item.value" :key="item.lable"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="Form">
              <el-select v-model="Form" @change="queryFormChange('form', $event)" clearable>
                <el-option v-for="item in formOptions" :label="item.lable" :value="item.value" :key="item.lable"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="Temper">
              <el-select v-model="Temper" @change="queryFormChange('temper', $event)" clearable>
                <el-option v-for="item in temperOptions" :label="item.lable" :value="item.value" :key="item.lable"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="Raw_Thickness">
              <el-select v-model="thickness" @change="queryFormChange('thickness', $event)" clearable>
                <el-option v-for="item in thinknessOptions" :label="item.lable" :value="item.value" :key="item.lable"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="Basis">
              <el-select v-model="Basis" @change="queryFormChange('basis', $event)" clearable>
                <el-option v-for="item in basicOptions" :label="item.lable" :value="item.value" :key="item.lable"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div class="queryBtn">
            <el-button size="small" type="primary" icon="search" @click="handleQuery">搜索</el-button>
          </div>
        </div>
        <div class="previewDiv">
          <el-form ref="resultForm" size="small" label-width="120">
            <el-form-item label="结果项">
              <el-select v-model="resultChooseId" @change="resultChange" clearable>
                <el-option v-for="item in resultList" :label="item.label" :value="item.value" :key="item.label"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <el-collapse v-model="modelValue" class="preview_tableStyle">
            <el-collapse-item title="Basic Properties" name="Basic" disabled>
              <el-form ref="resultFormBasic" inline size="small" label-width="120">
                <el-form-item label="Series">
                  <el-input disabled v-model="resultFormBasic.series" />
                </el-form-item>
                <el-form-item label="Specification">
                  <el-input disabled v-model="resultFormBasic.specification" />
                </el-form-item>
                <el-form-item label="Form">
                  <el-input disabled v-model="resultFormBasic.form" />
                </el-form-item>
                <el-form-item label="Temper">
                  <el-input disabled v-model="resultFormBasic.temper" />
                </el-form-item>
                <el-form-item label="Raw_Thickness">
                  <el-input disabled v-model="resultFormBasic.thickness" />
                </el-form-item>
                <el-form-item label="Basis">
                  <el-input disabled v-model="resultFormBasic.basis" />
                </el-form-item>
              </el-form>
            </el-collapse-item>
            <el-collapse-item title="Mechanical Properties" name="Mechanical">
              <el-form inline class="parameterLayout" size="small" label-width="120">
                <el-form-item label="F_tu">
                  <div v-if="f_tu.condition">
                    <el-select v-model="f_tu.condition" :disabled="f_tu?.options.length === 0" @change="parameterChange('f_tu')">
                      <el-option v-for="item in f_tu?.options" :key="item.condition" :label="item.condition" :value="item.condition"></el-option>
                    </el-select>
                    <span>{{ f_tu?.value }}</span>
                  </div>
                  <div v-else>
                    <el-input v-modal="f_tu?.value" disabled/>
                  </div>
                </el-form-item>
                <el-form-item label="F_ty">
                  <div v-if="f_ty.condition">
                    <el-select v-model="f_ty.condition" :disabled="f_ty?.options.length === 0" @change="parameterChange('f_ty')">
                      <el-option v-for="item in f_ty?.options" :key="item.condition" :label="item.condition" :value="item.condition"></el-option>
                    </el-select>
                    <span>{{ f_ty?.value }}</span>
                  </div>
                  <div v-else>
                    <el-input v-modal="f_ty.value" disabled/>
                  </div>
                </el-form-item>
                <el-form-item label="F_cy">
                  <div v-if="f_cy.condition">
                    <el-select v-model="f_cy.condition" :disabled="f_cy?.options.length === 0" @change="parameterChange('f_cy')">
                      <el-option v-for="item in f_cy?.options" :key="item.condition" :label="item.condition" :value="item.condition"></el-option>
                    </el-select>
                    <span>{{ f_cy?.value }}</span>
                  </div>
                  <div v-else>
                    <el-input v-modal="f_cy.value" disabled/>
                  </div>
                </el-form-item>
                <el-form-item label="F_su">
                  <div v-if="f_su.condition">
                    <el-select v-model="f_su.condition" :disabled="f_su?.options.length === 0" @change="parameterChange('f_su')">
                      <el-option v-for="item in f_su?.options" :key="item.condition" :label="item.condition" :value="item.condition"></el-option>
                    </el-select>
                    <span>{{ f_su?.value }}</span>
                  </div>
                  <div v-else>
                    <el-input v-modal="f_su.value" disabled/>
                  </div>
                </el-form-item>
                <el-form-item label="F_bru">
                  <div v-if="f_bru.condition">
                    <el-select v-model="f_bru.condition" :disabled="f_bru?.options.length === 0" @change="parameterChange('f_bru')">
                      <el-option v-for="item in f_bru?.options" :key="item.condition" :label="item.condition" :value="item.condition"></el-option>
                    </el-select>
                    <span>{{ f_bru?.value }}</span>
                  </div>
                  <div v-else>
                    <el-input v-modal="f_bru.value" disabled/>
                  </div>
                </el-form-item>
                <el-form-item label="F_bry">
                  <div v-if="f_bry.condition">
                    <el-select v-model="f_bry.condition" :disabled="f_bry?.options.length === 0" @change="parameterChange('f_bry')">
                      <el-option v-for="item in f_bry?.options" :key="item.condition" :label="item.condition" :value="item.condition"></el-option>
                    </el-select>
                    <span>{{ f_bry?.value }}</span>
                  </div>
                  <div v-else>
                    <el-input v-modal="f_bry.value" disabled/>
                  </div>
                </el-form-item>
                <el-form-item label="E">
                  <div v-if="e.condition">
                    <el-select v-model="e.condition" :disabled="e?.options.length === 0" @change="parameterChange('e')">
                      <el-option v-for="item in e?.options" :key="item.condition" :label="item.condition" :value="item.condition"></el-option>
                    </el-select>
                    <span>{{ e?.value }}</span>
                  </div>
                  <div v-else>
                    <el-input v-model="e.value" disabled />
                  </div>
                </el-form-item>
                <el-form-item label="E_sec">
                  <div v-if="e_sec.condition">
                    <el-select v-model="e_sec.condition" :disabled="e_sec?.options.length === 0" @change="parameterChange('e_sec')">
                      <el-option v-for="item in e_sec?.options" :key="item.condition" :label="item.condition" :value="item.condition"></el-option>
                    </el-select>
                    <span>{{ e_sec?.value }}</span>
                  </div>
                  <div v-else>
                    <el-input v-model="e_sec.value" disabled />
                  </div>
                </el-form-item>
                <el-form-item label="Ec">
                  <div v-if="ec.condition">
                    <el-select v-model="ec.condition" :disabled="ec?.options.length === 0" @change="parameterChange('ec')">
                      <el-option v-for="item in ec?.options" :key="item.condition" :label="item.condition" :value="item.condition"></el-option>
                    </el-select>
                    <span>{{ ec?.value }}</span>
                  </div>
                  <div v-else>
                    <el-input v-model="ec.value" disabled />
                  </div>
                </el-form-item>
                <el-form-item label="Ec_sec">
                  <div v-if="ec_sec.condition">
                    <el-select v-model="ec_sec.condition" :disabled="ec_sec?.options.length === 0" @change="parameterChange('ec_sec')">
                      <el-option v-for="item in ec_sec?.options" :key="item.condition" :label="item.condition" :value="item.condition"></el-option>
                    </el-select>
                    <span>{{ ec_sec?.value }}</span>
                  </div>
                  <div v-else>
                    <el-input v-model="ec_sec.value" disabled />
                  </div>
                </el-form-item>
                <el-form-item label="G">
                  <div v-if="g.condition">
                    <el-select v-model="g.condition" :disabled="g?.options.length === 0" @change="parameterChange('g')">
                      <el-option v-for="item in g?.options" :key="item.condition" :label="item.condition" :value="item.condition"></el-option>
                    </el-select>
                    <span> {{ g?.value }}</span>
                  </div>
                  <div v-else>
                    <el-input v-model="g.value" disabled />
                  </div>
                </el-form-item>
                <el-form-item label="Nu">
                  <div v-if="nu.condition">
                    <el-select v-model="nu.condition" :disabled="nu?.options.length === 0" @change="parameterChange('nu')">
                      <el-option v-for="item in nu?.options" :key="item.condition" :label="item.condition" :value="item.condition"></el-option>
                    </el-select>
                    <span>{{ nu?.value }}</span>
                  </div>
                  <div v-else>
                    <el-input v-model="nu.value" disabled />
                  </div>
                </el-form-item>
                <el-form-item label="E_s_basis">
                  <div v-if="e_s_basis.condition">
                    <el-select v-model="e_s_basis.condition" :disabled="e_s_basis?.options.length === 0" @change="parameterChange('e_s_basis')">
                      <el-option v-for="item in e_s_basis?.options" :key="item.condition" :label="item.condition" :value="item.condition"></el-option>
                    </el-select>
                    <span> {{ e_s_basis?.value }}</span>
                  </div>
                  <div v-else>
                    <el-input v-model="e_s_basis.value" disabled />
                  </div>
                </el-form-item>
              </el-form>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
      <div class="rightDiv" v-if="showType === 'table'">
        <el-table :data="comp_material_data" style="width: 100%">
          <el-table-column prop="p_index" label="p_index" fixed="left" />
          <el-table-column prop="A11" label="A11" width="120" />
          <el-table-column prop="A12" label="A12" width="120" />
          <el-table-column prop="A22" label="A22" width="120" />
          <el-table-column prop="A66" label="A66" width="120" />
          <el-table-column prop="D11" label="D11" width="120" />
          <el-table-column prop="D12" label="D12" width="120" />
          <el-table-column prop="D22" label="D22" width="120" />
          <el-table-column prop="D66" label="D66" width="120" />
          <el-table-column prop="EXX" label="EXX" width="120" />
          <el-table-column prop="EYY" label="EYY" width="120" />
          <el-table-column prop="GXY" label="GXY" width="120" />
          <el-table-column prop="VXY" label="VXY" width="120" />
          <el-table-column prop="M_n" label="M_n" />
        </el-table>
      </div>
    </div>
  </div>
</template>
<script setup>
import request from '@/utils/request';
import { ref, onMounted, nextTick, reactive } from 'vue';
import { getMaterialTree, getMatMaterialDetail, getMatMaterialMenus } from '@/api/material';
//数据定义
const modelValue = ref(['Basic', 'Mechanical']);
//左侧数结构
let treeData = ref([]);
const Specification = ref('');
const Form = ref('');
const Temper = ref('');
const thickness = ref('');
const Basis = ref('');
//结果项下拉列表
const resultList = ref([]);
//所有数据查询结果
const queryResult = ref([]);
const series = ref('');
//基本项结果列表
let resultFormBasic = ref({ series: '', specification: '', form: '', temper: '', thickness: '', basis: '' });
let f_tu = ref({ condition: '', value: '', options: [] });
let f_ty = ref({ condition: '', value: '', options: [] });
let f_cy = ref({ condition: '', value: '', options: [] });
let f_su = ref({ condition: '', value: '', options: [] });
let f_bru = ref({ condition: '', value: '', options: [] });
let f_bry = ref({ condition: '', value: '', options: [] });
let e = ref({ condition: '', value: '', options: [] });
let e_sec = ref({ condition: '', value: '', options: [] });
let ec = ref({ condition: '', value: '', options: [] });
let ec_sec = ref({ condition: '', value: '', options: [] });
let g = ref({ condition: '', value: '', options: [] });
let nu = ref({ condition: '', value: '', options: [] });
let e_s_basis = ref({ condition: '', value: '', options: [] });
//基础数据form下拉列表
let basicOptions = ref([]);
let formOptions = ref([]);
let specialOptions = ref([]);
let temperOptions = ref([]);
let thinknessOptions = ref([]);
//结果项选择
let resultChooseId = ref('');
//设置菜单选择类型
let showType = ref('');
// 树选择节点
let selectTreeNode = ref('');
const loading = ref(true);
//复合材料数据
let comp_material_data = ref([]);
//默认选中节点
const defaultNode = ref({ id: '', type: '', label: '' });
onMounted(() => {
  loadTreeData().then(() => {
    treeSelect(defaultNode.value);
  });
});
// tree选择事件
const treeSelect = (selected) => {
  selectTreeNode.value = selected.id;
  resetForm();
  resetQueryForm();
  if (selected.type === 'comp_material') {
    showType.value = 'table';
  } else {
    showType.value = 'form';
  }
  //金属材料选择-查询详情
  if (selected.type === 'series') {
    getMatMaterial();
    //查询queryform的下拉选项列表
    setQueryOptionsAndResult({ type: 'mat_material', series: selected.label });
  }
};
const resetQueryForm = () => {
  Specification.value = '';
  Form.value = '';
  Temper.value = '';
  thickness.value = '';
  Basis.value = '';
};
const resetForm = () => {
  resultFormBasic.value = { series: '', specification: '', form: '', temper: '', thickness: '', basis: '' };
  resultList.value = [];
  f_tu.value = { condition: '', value: '', options: [] };
  f_ty.value = { condition: '', value: '', options: [] };
  f_cy.value = { condition: '', value: '', options: [] };
  f_su.value = { condition: '', value: '', options: [] };
  f_bru.value = { condition: '', value: '', options: [] };
  f_bry.value = { condition: '', value: '', options: [] };
  e.value = { condition: '', value: '', options: [] };
  e_sec.value = { condition: '', value: '', options: [] };
  ec.value = { condition: '', value: '', options: [] };
  ec_sec.value = { condition: '', value: '', options: [] };
  g.value = { condition: '', value: '', options: [] };
  nu.value = { condition: '', value: '', options: [] };
  e_s_basis.value = { condition: '', value: '', options: [] };
};
// queryform选择后过滤数据
const queryFormChange = (type, event) => {
  switch (type) {
    case 'specification':
      Specification.value = event;
      break;
    case 'form':
      Form.value = event;
      break;
    case 'temper':
      Temper.value = event;
      break;
    case 'thickness':
      thickness.value = event;
      break;
    case 'basis':
      Basis.value = event;
      break;
    default:
      '';
  }
};
const handleQuery = () => {
  resetForm();
  filterData();
};
//条件过滤数据
const filterData = () => {
  let newResult = queryResult.value;
  if (Specification.value) {
    newResult = newResult.filter((data) => {
      const basic = data.basic;
      return basic.specification.toString() === Specification.value;
    });
  }
  if (Form.value) {
    newResult = newResult.filter((data) => {
      const basic = data.basic;
      return basic.form.toString() === Form.value;
    });
  }
  if (Temper.value) {
    newResult = newResult.filter((data) => {
      const basic = data.basic;
      return basic.temper.toString() === Temper.value;
    });
  }
  if (thickness.value) {
    newResult = newResult.filter((data) => {
      const basic = data.basic;
      return basic.thickness.toString() === thickness.value;
    });
  }
  if (Basis.value) {
    newResult = newResult.filter((data) => {
      const basic = data.basic;
      return basic.basis.toString() === Basis.value;
    });
  }
  makeResultList(newResult);
};
const resultChange = () => {
  const result = queryResult.value.filter((data) => {
    return data.name === resultChooseId.value;
  });
  if (result.length > 0) {
    //设置basicform表单
    setBasicForm(result[0]?.basic);
    //设置parameters表单
    setParameters(result[0]?.parameter);
  }
};
// 制造结果项form的下拉框选项
const makeResultList = (data) => {
  const list = data;
  for (let i = 0; i < list.length; i++) {
    resultList.value.push({
      label: list[i]?.name,
      value: list[i]?.name
    });
  }
  //默认设置结果项为第一条数据
  resultChooseId.value = list[0]?.name || '';
  //设置basicform表单
  setBasicForm(list[0]?.basic);
  //设置parameters表单
  setParameters(list[0]?.parameter);
};
const setBasicForm = (data) => {
  if (data) {
    resultFormBasic.value = data;
  }
};
const setParameters = (data) => {
  let tmpObj = {};
  if (data) {
    Object.keys(data).forEach((key) => {
      const tmpArr = data[key] || [];
      let tmpItem = { value: '', condition: '', options: [] };
      if (tmpArr.length === 0) {
        tmpObj[key] = tmpItem;
      } else {
        tmpItem.value = tmpArr[0]?.value;
        tmpItem.condition = tmpArr[0]?.condition;
        const optionsArr = tmpArr.filter((el) => {
          if (el.condition) {
            return { lable: el.condition, value: el.value };
          }
        });
        tmpItem.options = [...optionsArr];
        tmpObj[key] = tmpItem;
      }
    });
    f_tu.value = tmpObj?.f_tu;
    f_cy.value = tmpObj?.f_cy;
    f_ty.value = tmpObj?.f_ty;
    f_su.value = tmpObj?.f_su;
    f_bru.value = tmpObj?.f_bru;
    f_bry.value = tmpObj?.f_bry;
    e.value = tmpObj?.e;
    e_sec.value = tmpObj?.e_sec;
    ec.value = tmpObj?.ec;
    ec_sec.value = tmpObj?.ec_sec;
    g.value = tmpObj?.g;
    nu.value = tmpObj?.nu;
    e_s_basis.value = tmpObj?.e_s_basis;
  }
};
//parameter下拉选项变化
const parameterChange = (key) => {
  switch(key){
    case 'f_tu':{
      const result = f_tu.value.options.find(el=>el.condition === f_tu.value.condition)
      f_tu.value.value = result?.value;
      break;
    }
    case 'e':{
      const result = e.value.options.find(el=>el.condition === e.value.condition)
      e.value.value = result?.value;
      break;
    }
    case 'e_sec':{
      const result = e_sec.value.options.find(el=>el.condition === e_sec.value.condition)
      e_sec.value.value = result?.value;
      break;
    }
    case 'ec':{
      const result = ec.value.options.find(el=>el.condition === ec.value.condition)
      ec.value.value = result?.value;
      break;
    }
    case 'ec_sec':{
      const result = ec_sec.value.options.find(el=>el.condition === ec_sec.value.condition)
      ec_sec.value.value = result?.value;
      break;
    }
    case 'f_cy':{
      const result = f_cy.value.options.find(el=>el.condition === f_cy.value.condition)
      f_cy.value.value = result?.value;
      break;
    }
    case 'f_su':{
      const result = f_su.value.options.find(el=>el.condition === f_su.value.condition)
      f_su.value.value = result?.value;
      break;
    }
    case 'f_ty':{
      const result = f_ty.value.options.find(el=>el.condition === f_ty.value.condition)
      f_ty.value.value = result?.value;
      break;
    }
    case 'g':{
      const result = g.value.options.find(el=>el.condition === g.value.condition)
      g.value.value = result?.value;
      break;
    }
    case 'nu':{
      const result = nu.value.options.find(el=>el.condition === nu.value.condition)
      nu.value.value = result?.value;
      break;
    }
    case 'e_s_basis':{
      const result = e_s_basis.value.options.find(el=>el.condition === e_s_basis.value.condition)
      e_s_basis.value.value = result?.value;
      break;
    }
    case 'f_bru':{
      const result = f_bru.value.options.find(el=>el.condition === f_bru.value.condition)
      f_bru.value.value = result?.value;
      break;
    }
    case 'f_bry':{
      const result = f_bry.value.options.find(el=>el.condition === f_bry.value.condition)
      f_bry.value.value = result?.value;
      break;
    }
  }
  
};
//装载queryform的下拉列表
const makeQueryForm = (data) => {
  series.value = data?.series || '';
  if (data) {
    basicOptions.value = data?.basis.map((el) => {
      return { lable: el, value: el };
    });
    formOptions.value = data?.form.map((el) => {
      return { lable: el, value: el };
    });
    specialOptions.value = data?.specification.map((el) => {
      return { lable: el, value: el };
    });
    temperOptions.value = data?.temper.map((el) => {
      return { lable: el, value: el };
    });
    thinknessOptions.value = data?.thickness.map((el) => {
      return { lable: el, value: el };
    });
  }
};
// 装载材料树数据
const loadTreeData = () => {
  loading.value = true;
  return new Promise((resolve) => {
    getTreeData().then((res) => {
      const result = res && res?.data?.children;
      const treeResult = processTreeData(result[0]);
      treeData.value = treeResult;
      loading.value = false;
      resolve(treeResult);
    });
  });
};
//处理树结构数据
const processTreeData = (tree) => {
  let returnTree = [];
  returnTree.push({ label: tree?.nodeName, children: [] });
  if (tree?.children) {
    const mat_material = tree?.children || [];
    let index = 0;
    for (let i = 0; i < mat_material.length; i++) {
      //复合材料
      if (mat_material[i].nodeType === 'comp_material') {
        returnTree[0].children?.push({ label: mat_material[i].nodeName, children: [{ label: 'All', type: 'comp_material' }] });
        comp_material_data.value = mat_material[i].children;
      } else {
        let mat_material_array = [];
        mat_material_array.push({ label: mat_material[i]?.nodeName, children: [] });
        const types = mat_material[i].children;
        for (let j = 0; j < types.length; j++) {
          let typeObj = { label: types[j].type, children: [] };
          if (types[j].series && types[j].series.length > 0) {
            const series = types[j].series.map((item) => {
              if (!defaultNode.value.id) {
                defaultNode.value = { id: item, type: 'series', label: item };
              }
              return { label: item, id: item, type: 'series', index: index++ };
            });
            typeObj.children = series;
          }
          mat_material_array[i].children.push(typeObj);
        }
        returnTree[0].children.push(...mat_material_array);
      }
    }
    console.log('processTreeData');
    console.log(returnTree);

    return returnTree;
  }
};
// *******************************  接口  *****************************

// 获取金属材料库的树数据
const getTreeData = () => {
  return getMaterialTree();
};
// 查询金属材料属性
const getMatMaterial = () => {
  getMatMaterialDetail(selectTreeNode.value).then((res) => {
    queryResult.value = res?.data;
    makeResultList(res?.data);
  });
};
// 填充查询条件option及查询结果
const setQueryOptionsAndResult = (queryPara) => {
  // 获取金属材料下拉框选项
  getMatMaterialMenus(queryPara).then((res) => {
    makeQueryForm(res?.data);
  });
};
</script>
<style lang="scss" scoped>
.mainStyle {
  height: calc(100vh - 84px);
  display: flex;
}
.queryButtonClass {
  padding-bottom: 4px;
}
.treeDiv {
  width: 250px;
  padding-top: 10px;
  height: calc(100vh - 84px);
  overflow: auto;
  border-right: 1px solid #dddddd7a;
}
.treeStyle {
  padding-top: 10px;
}
.treeTitle {
  padding-left: 10px;
}
.preview_tableStyle {
  margin-top: 10px;
}
.previewDiv,
.queryFormDiv {
  border: 1px solid #dddddd7a;
  padding: 20px;
  .queryBtn {
    padding-left: 120px;
  }
  .parameterLayout {
    span {
      display: inline-block;
      width: 80px;
      padding-left: 5px;
    }
  }
}
.rightDiv {
  flex: 1;
  overflow: auto;
  padding-top: 10px;
  margin-left: 20px;
  margin-right: 20px;
  height: calc(100vh - 84px);
}
@media (max-width: 1300px) {
  .previewDiv {
    .parameterLayout {
      :deep(.el-form-item--default .el-form-item__content) {
        width: auto;
      }
    }
  }
}
@media (max-width: 1300px) {
  :deep(.el-form-item--default .el-form-item__content) {
    width: 190px;
  }
  :deep(.el-form--inline .el-select) {
    width: 170px;
  }
  :deep(.el-form--inline .el-input) {
    width: 170px;
  }
}
@media (min-width: 1300px) {
  :deep(.el-form-item--default .el-form-item__content) {
    width: 260px;
  }
  :deep(.el-form--inline .el-select) {
    width: 240px;
  }
  :deep(.el-form--inline .el-input) {
    width: 240px;
  }
}
:deep(.el-form-item--default .el-form-item__label) {
  width: 120px;
  font-size: 12px;
  font-weight: normal;
}
:deep(.el-collapse .el-collapse-item__content) {
  padding: 0;
}
:deep(.el-table--default) {
  height: 100%;
}
:deep(.el-form--inline .el-form-item) {
  min-width: 370px;
  margin-right: 0;
}
:deep(.el-tree-node__label) {
    font-size: 12px;
    color: #606266;
  }
  :deep(.el-form .el-form-item__label) {
  font-size: 12px;
  font-weight: normal;
}
</style>
